<template>
    <div>
        <p class="top">类型：<span class="mar50">大厅</span>桌号：<span>01</span></p>
        <label for="">开桌时间：</label> <el-date-picker type="datetime" v-model="time" placeholder="选择日期时间"
            style="width: 83%;"></el-date-picker>
        <ul class="detail">
            <li>占用时间：<span>4小时32分钟</span></li>
            <li>计费规则：<span>按小时计费</span></li>
            <li>服务费：<span>0元</span></li>
            <li>预估合计：<span><span>1213</span>元</span></li>

        </ul>
        <label for="">按时提醒：</label> <el-date-picker type="datetime" v-model="time1" placeholder="选择日期时间"
            style="width: 66%;"> </el-date-picker> <el-switch inactive-text="关闭" v-model="value" active-color="#CAAB62"
            inactive-color=" #ff4949">
        </el-switch>

        <div class="right">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="cancel">确认</el-button>
        </div>
    </div>
</template>
  
<script>

export default {
    name: "",
    components: {},
    data() {
        return {
            value: true,
            time: '',
            time1: ''
        }
    },
    created() {

    },
    methods: {
        cancel() {
            this.$emit('update:close', false)
        },

    }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.right {
    text-align: right;
    margin-top: 20px;
}

.top {
    color: #201D1B;
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 15px;

    span {

        color: #9C9186;
    }

    .mar50 {
        margin-right: 150px;
    }
}

.detail {

    margin: 10px 0 5px;

    li {
        color: #201D1B;
        font-size: 14px;
        line-height: 35px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
            text-align: right;
            color: #9C9186;

            span {
                color: #FF2E00;

            }
        }
    }

}</style>
  